<template>
    <div id="share">
        <ToolBar2 :names="names"></ToolBar2>
        <div class="content">
            <div class="top-bg">

            </div>
            <div class="bg-cover">
                <img :src="ShareCover" alt="" class="share-cover">
                <img :src="platform" alt="" class="platform">


                <div class="info-box one">
                    <p>
                        <span>
                            <img :src="one.headimg" alt="">
                        </span>
                    </p>
                    <p>{{one.nickname|hideName}}</p>
                    <p>{{one.integral}}积分</p>
                </div>

                <div class="info-box two">
                    <p>
                        <span>
                            <img :src="two.headimg" alt="">
                        </span>
                    </p>
                    <p>{{two.nickname|hideName}}</p>
                    <p>{{two.integral}}积分</p>
                </div>
                <div class="info-box three">
                    <p>
                        <span>
                            <img :src="three.headimg" alt="">
                        </span>
                    </p>
                    <p>{{three.nickname|hideName}}</p>
                    <p>{{three.integral}}积分</p>
                </div>
            </div>
            <div class="platform-list">
                <div class="list-item" v-for="(l,item) in list" :key="item" v-if="item >2">
                    <span>NO.{{item+1}}</span>
                    <span>{{l.nickname|hideName}}</span>
                    <span>{{l.integral}}积分</span>
                </div>

            </div>
        </div>

        <div class="invite">
            <p><span>邀请码：<span>{{inviteCode}}</span></span></p>
            <p>马上邀请好友</p>
        </div>
    </div>
</template>

<script>
    import ToolBar2 from "./ToolBar2";
    import ShareCover from "@/assets/img/img_yqhy.png"
    import platform from "@/assets/img/img_platform.png"
    import defaultHead from "@/assets/img/img_defult_tx.png"
    import yq from "@/assets/img/icon_yqhy.png"
    export default {
        name: "Share",
        components: {ToolBar2},
        data(){
            return {
                names:'邀请好友',
                ShareCover:ShareCover,
                platform:platform,
                defaultHead:defaultHead,
                yq:yq,
                list:[],
                one:{},
                two:{},
                three:{},
                inviteCode:''

            }
        },
        mounted() {
            this.$api.my.IntegralRank(this.getCookie("token")).then(res=> {
                // 执行某些操作
                if(res.data.code === 1){
                    this.list = res.data.data
                    this.one = res.data.data[0]
                    this.two = res.data.data[1]
                    this.three = res.data.data[2]
                }
                else{
                    this.$toast({
                        message: res.data.msg,
                        duration: 1000,
                        forbidClick: true
                    })
                }




            })
            this.$api.my.UserInvitation(this.getCookie("token")).then(res=> {
                // 执行某些操作

                    this.inviteCode = res.data.data


            })
        }
    }
</script>

<style scoped>
    .content{
        position: absolute;
        top: 3rem;
        left: 0;
        right: 0;
        /*margin-bottom: 6.5rem;*/
        padding-bottom:6.5rem ;
    }
    .top-bg{
        background: #14A365;
        opacity: 0.75;
        height: 26rem;
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        z-index: -1;
    }
    .invite{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 5.5rem;
    }
    .invite p{
        text-align: center;
    }
    .invite p:nth-child(1){
        height: 2.25rem;
        background: #fff;
        font-size:0.94rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 1.5rem;
    }
    .invite p:nth-child(1) span span{
        color: rgba(20,163,101,1);
    }
    .invite p:nth-child(2){
        height:3.25rem;
        background:rgba(20,163,101,1);
        font-size:1.06rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .bg-cover{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 26rem;
        overflow: hidden;
        z-index: -1;
    }
    .bg-cover img{
        position: absolute;
        width: 90%;
        left: 5%;
        right: 5%;
    }
    .share-cover{
        top: 1rem;
    }
    .platform{
        bottom: 2rem;
    }
    .info-box{
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }
    .info-box p{
        width: 100%;
        text-align: center;
    }
    .info-box p:nth-child(1){

        display: flex;
        justify-content: center;
        align-items: center;
    }
    .info-box p:nth-child(2){

        font-size:0.81rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
        margin-bottom: 0.5rem;
    }
    .info-box p:nth-child(3){

        font-size:0.81rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
    }

    .info-box p:nth-child(1) span{
        position: relative;
        display: inline-flex;
        left: -0.2rem;
        
    }
    .one{
        left: 5.5rem;
        bottom: 9.5rem;
    }
    .one p:nth-child(1) span{
        width: 4.3rem;
        height: 4.5rem;
        background: url("../../assets/img/bg_no1.png")no-repeat;
        background-size: contain;


    }
    .one p:nth-child(1) span img{
        width: 3.19rem;
        height: 3.19rem;
        border-radius: 50%;
        position: absolute;
        top:1rem;
        left: 0.55rem;
    }

    .two{
        left: -2rem;
        bottom: 6.8rem;
    }
    .two p:nth-child(1) span{
        width: 4rem;
        height: 4rem;
        background: url("../../assets/img/bg_no2.png")no-repeat;
        background-size: contain;


    }
    .two p:nth-child(1) span img{
        width: 2.7rem;
        height: 2.7rem;
        border-radius: 50%;
        position: absolute;
        top:0.9rem;
        left: 0.68rem;
    }

    .three{
        right: -2rem;
        bottom: 6.2rem;
    }
    .three p:nth-child(1) span{
        width: 4rem;
        height: 4rem;
        background: url("../../assets/img/bg_no3.png")no-repeat;
        background-size: contain;


    }
    .three p:nth-child(1) span img{
        width: 2.7rem;
        height: 2.7rem;
        border-radius: 50%;
        position: absolute;
        top:0.9rem;
        left: 0.68rem;
    }
    .platform-list{
        width: 90%;
        margin: -2.5rem auto 0 auto;
        background: #fff;
        border-radius: 0.5rem;
        padding: 0 0.5rem;
    }
    .list-item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        border-bottom: 1px solid #eee;

    }
    .list-item span{
        font-size:0.88rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:3.17rem;
    }
    .list-item:last-child{
        border-bottom:none;
    }
    .list-item span:last-child{
        color: #FF4444;
    }
</style>